import * as THREE from "three";
// 引入threejs 的扩展库  相机轨道控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
const canvas_fun = function (className) {

    // ******************创建一个场景*************

    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(80, 80, 80);
    // 漫反射网格材质MeshLambertMaterial (opens new window)会受到光照影响，
    const material = new THREE.MeshLambertMaterial({
        color: 0x00ffa0,
        transparent: false,
        opacity: 0.5,
    });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(0, 0, 0);
    scene.add(cube);
    const xyz = new THREE.AxesHelper(100);
    scene.add(xyz);
    // ****************添加光源*********************
    //  添加光源

    // ####################### 点光源 ###################################
    //点光源：两个参数分别表示光源颜色和光照强度
    // 参数1：0xffffff是纯白光,表示光源颜色
    // 参数2：1.0,表示光照强度，可以根据需要调整
    const light = new THREE.PointLight(0xffffff, 1);
    // 光照强度
    light.intensity = 20.0;
    // 光源衰减 0.0:不随着距离的远近而衰减
    light.decay = 0.0
    // 光源位置设置在，一定在在物体外表面以外
    light.position.set(200, -100, 50);
    // scene.add(light);
    //   可视化点光源
    const lightHelper = new THREE.PointLightHelper(light, 12)
    // scene.add(lightHelper)

    // ############################# 环境光 ################################
    // 环境光无方向，只改变明暗
    const ambient = new THREE.AmbientLight(0xffffff, 0.4)
    scene.add(ambient)

    // ########################### 平行光 ####################################
    const dirLight = new THREE.DirectionalLight(0xffff, 1.0)
    // 平行光的出发点
    dirLight.position.set(100, 70, 50)
    dirLight.target = cube;//平行光目标，默认是原点
    scene.add(dirLight)
    // 平行光  可视化
    const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 10, 0xff0000)
    // scene.add(dirLightHelper)
    // *****************照相机******************
    const Dom = document.querySelector(className);
    // console.log(Dom.innerHeight, "dom");
    const width = Dom.offsetWidth;//dom的实际内容宽
    const height = Dom.offsetHeight;
    const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
    camera.position.set(200, 200, 200);
    camera.lookAt(cube.position);

    // *****************渲染器*****canvas*************
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    Dom.appendChild(renderer.domElement);

    //******************创建一个相机控件***************
    // 创建一个相机控件
    const cintrols = new OrbitControls(camera, renderer.domElement);
    // 监听相机控件的操作:鼠标、键盘事件---有动画，不监听
    // cintrols.addEventListener("change", function () {
    //     // console.log("相机的位置：",camera.position );
    //     renderer.render(scene, camera);
    // });
    // ********************* 动画 *** 渲染循环 *********************************
    /**
     * 旋转动画
     * */
    const clock = new THREE.Clock();//创建一个时钟对象
    function rotate() {
        const spt = clock.getDelta() * 1000;//毫秒
        // console.log(spt, "一次渲染循环时间");
        // console.log(1000 / spt, "渲染帧率");
        cube.rotateY(0.005);
        renderer.render(scene, camera);
        // requestAnimationFrame是window的一个API，实现周期性循环执行，
        // 默认每秒钟执行60次，但是不一定做得到，要看代码的性能
        requestAnimationFrame(rotate)
    }
    rotate()
    // *****************************  canvas画布宽高动态变化  ******************************
    // onresize 事件：窗口大小变化是触发
    window.onresize = function () {

        // 重置 渲染器的宽高
        renderer.setSize(Dom.offsetWidth, Dom.offsetHeight)
        console.log(Dom.offsetWidth, Dom.offsetHeight, "dom=-=====");
        // renderer.render(scene, camera);//有动画不写这句，没动画要写


        // 相机 重置宽高比
        camera.aspect = Dom.offsetWidth / Dom.offsetHeight
        // 更新投影矩阵
        camera.updateProjectionMatrix()

    }
}
export { canvas_fun } 